<template>
  <div class="col-md-8 col-md-offset-2">
    <ul class="cate-nav">
      <div class="navbar-header">
        <a class="navbar-brand">跨境电商服务平台</a>
      </div>
      <li class="cate" @mouseover="showMenu='block'" @mouseout="showMenu='none'">
        商品分类
        <ul id="dropdown_cate" :style="{display:showMenu}">
          <li  v-for="cate in cates" :key="cate.cateId">
            <router-link  :to="{ name: 'CateView', params: { id: cate.cateId } }">{{cate.cateName}}</router-link>
          </li>
        </ul>
      </li>
           <li  v-for="cate in cates.slice(0,size)" :key="cate.cateId">
            <router-link  :to="{ name: 'CateView', params: { id: cate.cateId } }">{{cate.cateName}}</router-link>
          </li>
    </ul>
  </div>
</template>
<script>
</script>
<script>
export default {
	props:['cates','size'],
	data() {
		return {
			showMenu:'none'
		}
	},
}
</script>